$(document).ready(function(){

  var colors = new Array(
    'blue',
    'green',
    'yellow',
    'purple',
    'orange'
  );

  var verbs = new Array(
    'genius',
    '设计',
    'design',
    '艺术',
    '奋斗'
  );

  var nouns = new Array(
    '未来',
    'future',
    '年轻',
    'creat',
    'amazing'
  );

  var currentIndex = 0;

  var body = $('body');
  var button = $('.sayhi');
  var h1 = $('h1');
  var title = $('#title');
  var h1Width = 50;
  var formOpen = false;
  var play = true;
  var timerId;

  $("#phone").mask("999-999-9999",{placeholder:" "})

  body.hide().fadeIn('slow');

  $('#footer').hide().css('bottom', ($('#footer').outerHeight())*-1).fadeIn('slow').delay(500).animate({
    bottom: $('#footer').height()*-1,
  }, 750, 'easeOutElastic');
  
  $(window).resize(function(){
    if (!formOpen) $('#footer').css('bottom', $('#footer').height()*-1);
    title.css('width', h1.outerWidth());
  });

  $('.sayhi').click(function(e){
    //e.preventDefault();

    $.bbq.pushState({ action: 'contact' });

    clearInterval(timerId);

    $(this).hide();

    $('#footer').animate({
      bottom: 0
    }, 200, 'easeInSine', function() {
      fadeTextOut($("#first"));
      fadeTextOut($("#second"));
  
      formOpen = true;
    });

  });

  $('#cancel').click(function(e){
    e.preventDefault();
    formOpen = false;

    $.bbq.pushState({ action: 'cancel' });

    fadeTextIn($("#first"));
    setTimeout(function(){fadeTextIn($("#second"))}, 100);

    timerId = setInterval(changeColor, 3000);

    closeForm();

    $('.sayhi').fadeIn('fast');
  });

  $('input:text, textarea').focus(function(){
    $(this).removeClass('error');
  })

  $("form").submit(function(e){
    e.preventDefault();

    // Validate the form
    var invalid = $('input:text.required, textarea.required').filter(function() { return $(this).val() == ""; }).addClass('error');

    console.log(invalid.length);

    if (invalid.length > 0) return false;

    formOpen = false;

    $.post("/contact", { name: $("#name").val(), email: $("#email").val(), phone: $("#phone").val(), body: $("#message").val() });

    $("#first").html("thanks");
    $("#second").html("you");
    
    resizeTitle();

    closeForm();

    fadeTextIn($("#first"));
    setTimeout(function(){fadeTextIn($("#second"))}, 100);

    timerId = setInterval(changeColor, 3000);

    $.bbq.pushState({ action: 'submit' });

    return false;
  });

  function resizeTitle()
  {
    title.stop(true, true).animate({
      width: h1.outerWidth()
    }, 300).css('overflow', 'visible');
  }

  function closeForm()
  {
    $('#footer').animate({
      bottom: $('#footer').height()*-1
    }, 300, 'easeOutQuint', function(){
      
    });
  }

  function fadeTextOut(element)
  {
      if (formOpen) return;

      element.transition({
        y: 20,
        rotateX: '90deg',
        // opacity: 0
      }, 200, 'linear', function(){
        $(this).css({
          rotateX: '90deg',
          y: -20
        });

        if ($(this).attr('id') == 'first')
        {
          $(this).html(verbs[currentIndex]);
        }
        else
        {
          $(this).html(nouns[currentIndex]);
          
          resizeTitle();
        }  

        fadeTextIn(element);
      });
  }

  function changeColor()
  {
      var klass = body.attr('class');

      body.addClass(colors[currentIndex]);
      body.removeClass(klass);
      
      button.addClass(colors[currentIndex]);
      button.removeClass(klass);

      setTimeout(function(){fadeTextOut($("#first"))}, 400);
      setTimeout(function(){fadeTextOut($("#second"))}, 500);

      currentIndex++;

      if (currentIndex >= colors.length)
      {
        currentIndex = 0;
      }
  }

  function fadeTextIn(element)
  {
    if (formOpen) return;

    element.transition({
        y: 0,
        rotateX: '0deg',
        // opacity: 1
    }, 200);
  }

  timerId = setInterval(changeColor, 3000);

});